<template>
  <div class="navbar">
    <div class="bg_view"></div>
    <div style="display: flex; flex-direction: row; align-items: center;">
      <img class="top_bg" style="height: 100%" src="@/assets/image/top_bg.jpg" alt="" />

      <div class="middle_view left_view" v-if="headerType != 0">
        <div
          v-for="(item, index) in middleList"
          :key="index"
          style="margin-left: 25px"
          @click="clickTopButtonAction(item.type)"
        >
          <el-image class="icon_view" :src="item.icon"></el-image>
          <span>{{ item.name }}</span>
        </div>
      </div>

      <div class="title_nav_view" v-if="headerType == 0">
        <div class="line_view"></div>
        <span class="title_text">实验室综合管理系统</span>
      </div>
    </div>

    <div class="middle_view" style="margin-right: 30px" v-if="headerType != 0">
      <div class="welcome" :title="deptName" @click="getProfile"><span style="margin-right: 10px;">欢迎:</span><span>{{loginUser}}</span>
      <span style="margin: 0px 10px;">(</span><span>{{deptName}}</span><span style="margin: 0px 10px;">)</span></div>
      <div
        style="margin-left: 25px"
        @click="clickTopButtonAction(logoutInfo.type)"
      >
        <el-image class="icon_view" :src="logoutInfo.icon" title="退出系统"></el-image>
      </div>
    </div>

    <div class="middle_view" style="margin-right: 30px" v-if="headerType == 0">
      <div
        v-for="(item, index) in mainList"
        :key="index"
        style="margin-left: 25px"
        @click="clickTopButtonAction(item.type);return false;"
      >
        <el-image class="icon_view" :src="item.icon" ></el-image>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
const baseSize = 16;
export default {
  components: {},
  data() {
    return {
      loginUser:'',
      deptName:'',
      isScle: true,
      middleList: [
        {
          name: "菜单隐藏",
          icon: require("@/assets/image/top_icon1.png"),
          type: 0,
        },
        {
          name: "系统主页",
          icon: require("@/assets/image/top_icon2.png"),
          type: 1,
        },
        {
          name: "常用菜单",
          icon: require("@/assets/image/top_icon3.png"),
          type: 2,
        },
        {
          name: "智慧大屏",
          icon: require("@/assets/image/top_icon4.png"),
          type: 3,
        },
        {
          name: "应用中心",
          icon: require("@/assets/image/top_icon5.png"),
          type: 4,
        },
        {
          name: "任务管理",
          icon: require("@/assets/image/top_icon6.png"),
          type: 5,
        },
        {
          name: "申报备案",
          icon: require("@/assets/image/top_icon7.png"),
          type: 6,
        },
      ],
      logoutInfo: /*
        {
          name: "我的主页",
          icon: require("@/assets/image/top_icon11.png"),
          type: 7,
        },
        {
          name: "功能订阅",
          icon: require("@/assets/image/top_icon12.png"),
          type: 8,
        }, */
        {
          name: "退出",
          icon: require("@/assets/image/top_icon13.png"),
          type: 9,
        },
      mainList: [
        { name: "切换", icon: require("@/assets/image/top_icon6.png"), type: 10 },
        {
          name: "功能订阅",
          icon: require("@/assets/image/top_icon12.png"),
          type: 8,
        },
        {
          name: "设置",
          icon: require("@/assets/image/top_icon14.png"),
          type: 11,
        },
        {
          name: "退出",
          icon: require("@/assets/image/top_icon13.png"),
          type: 9,
        },
      ],
    };
  },
  props: {
    headerType: 0,
  },
  created() {
    this.deptName = this.$store.state.user.dept.deptName;
    this.loginUser = this.$store.state.user.nickName;
    this.setRem();
    window.onresize = () => {
      this.setRem();
    }
  },
  computed: {

  },
  methods: {
    setRem() {
      var scale;
      if (this.isScle) {
        scale = document.documentElement.clientWidth / 1920;
      }
      else {
        scale = document.documentElement.clientWidth / 1;
      }
      document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 1) + "px";
    },
    getProfile(){
      this.$router.push({ path:'/user/profile'});
    },
    clickTopButtonAction(index) {
      switch (index) {
        case 0: //菜单隐藏
          this.toggleSideBar();
          break;
        case 1: //系统主页
        this.$emit('switchNavigation', {type: true})
          this.isScle = true
          //this.setRem();
          break;
        case 2: //常用菜单
        this.$router.push({ path: '/labdata/orgnization' || "/" });
          break;
        case 3: //智慧大屏
          break;
        case 4: //应用中心
          break;
        case 5: //任务管理
        this.$router.push({ path: '/labsafety/labsafetyTask' || "/" });
          break;
        case 6: //申报备案
        this.$router.push({ path: '/labdata/declarationFiling' || "/" });
          break;
        case 7: //我的主页
          break;
        case 8: //功能订阅
          break;
        case 9: //退出
          this.logout();
          break;
        case 10: //切换
          this.$emit('switchNavigation', {type: false})
          this.isScle = false
          //this.setRem()
          break;
        case 11: //设置
          break;
      }
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.push({ path: '/login' });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 120px;
  margin-left: 0px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .top_bg {
    position: absolute;
    left: 0;
    z-index: -1;
    top: 0
  }
  .bg_view {
    background-color: rgb(72, 157, 221);
    position: absolute;
    width: 100%;
    height: 120px;
    z-index: -1;
    top: 0
  }

  .middle_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    .welcome{
      display: inline;
      margin-top: 105px;
      width:280px;
      color: white;
      font-weight: 400;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .left_view {
    position: absolute;
    left: 20%;
    top: 0;
  }
  .middle_view div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 60px;
    cursor: pointer;
    .icon_view {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      color: #fff;
      margin-top: 5px;
      width: 120px;
      text-align: center;
    }
  }
  .title_nav_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    left: 20%;
    width: 400px;
    height: 120px;
    top: 0;
  }
  .line_view {
    height: 40px;
    width: 2px;
    background-color: #fff;
  }
  .title_text {
    font-size: 36px;
    color: #fff;
    margin-left: 40px;
  }
}
</style>
